//点击Menu图标后

var minWidth = 180;
var menuWidth = 0.2;
var menuLeft = -1;

var container = document.getElementsByClassName('container')[0];
var menuContent = document.getElementsByClassName('menu-content')[0];
var header = document.getElementsByTagName('header')[0];

var menu = document.getElementById('menu');
var menuClose = document.getElementById('menu-close');

menu.addEventListener('click',menuIn);

function menuIn(){
	var width = document.body.clientWidth;
	width = width * menuWidth;

	if(width < minWidth){
		container.style.left = minWidth + 'px';
		header.style.left = minWidth + 'px';
	}
	else{
		
		container.style.left = menuWidth*100 + '%';
		header.style.left = menuWidth*100 + '%';
	}

	menuContent.style.left = 0;
	menu.style.transform = 'rotateZ(90deg)';
	menu.style.opacity = 0;
	menuClose.style.display = 'block';
	setTimeout(function(){
		menu.style.display = 'none';
		menuClose.style.opacity = 1;
	},500);
	menuClose.addEventListener('click', menuOut);
}

function menuOut(){
	// menu.style.transfrom = "rotateZ(90deg)";

	menuContent.style.left = menuLeft*100 + '%';
	container.style.left = 0;
	header.style.left = 0;
	menuClose.style.opacity = 0;
	menu.style.display = 'block';
	setTimeout(function(){
		menuClose.style.display = 'none';
		menu.style.opacity = 1;
		menu.style.transform = 'rotateZ(0)'
	},500);
	// menu.removeEventListener('click',move);
}

//// 首页时间获取
var hours = document.getElementById('hours');
var minutes = document.getElementById('minutes');
var seconds = document.getElementById('seconds');

var hour,min,sec;
var timer = '';
getTime();
function getTime(){
	timer = new Date();
	hour = timer.getHours();
	min = timer.getMinutes();
	sec = timer.getSeconds();

	innerTime(hours,hour);
	innerTime(minutes,min);
	innerTime(seconds,sec);
}

function innerTime(obj,num){

	if(num < 10){

		num = '0' + num;
	}

	obj.innerHTML = num;
}
var t = setInterval(getTime,1000);


//页面切换
var page1 = document.getElementsByClassName('page1')[0];
var page2 = document.getElementsByClassName('page2')[0];
var page3 = document.getElementsByClassName('page3')[0];
var contactArea = document.getElementsByClassName('contact')[0];
var mask = document.getElementsByClassName('mask')[0];
var modal = document.getElementsByClassName('modal')[0];
var container = document.getElementsByClassName('container')[0];

var home = document.getElementById('home');
var works = document.getElementById('works');
var about = document.getElementById('about');
var contact = document.getElementById('contact');
var start = document.getElementById('start');

home.addEventListener('click',ToPage1);

works.addEventListener('click',ToPage2);

about.addEventListener('click',ToPage3);

contact.addEventListener('click',function(){
	contactArea.style.display = 'block';
	setTimeout("contactArea.style.opacity = 1",0);
	setTimeout("modal.style.transform = 'translateY(100%)'",0);
	mask.addEventListener('click',function(){
		contactArea.style.opacity = 0;
		modal.style.transform = 'translateY(0)';
		setTimeout("contactArea.style.display = 'none';",800);
	});
});

start.addEventListener('click',ToPage2);

container.addEventListener('click',menuOut);

function ToPage1(){

	if(page1.style.transform == "translateY(0)" || page1.style.transform == ''){
		menuOut();
		return;
	}

	page3.style.transform = 'translateY(0)';
	page2.style.transform = 'translateY(0)';
	page1.style.transform = 'translateY(0)';
	setTimeout(menuOut,800);
	
}

function ToPage2(){

	if(page2.style.transform == "translateY(-100%)"){
		menuOut();
		return;
	}

	page1.style.transform = "translateY(-100%)";
	page2.style.transform = "translateY(-100%)";
	page3.style.transform = "translateY(-100%)";
	setTimeout(menuOut,800);
}

function ToPage3(){

	if(page3.style.transform == "translateY(-200%)"){
		menuOut();
		return;
	}

	page1.style.transform = "translateY(-200%)";
	page2.style.transform = "translateY(-200%)";
	page3.style.transform = "translateY(-200%)";
	setTimeout(menuOut,800);
}